<template>
  <div>

    <div class="row">
        <div class="col-md-12">
          <!-- BEGIN EXAMPLE TABLE PORTLET-->
          <div class="portlet box grey-cascade">
            <div class="portlet-title">
              <div class="caption">
                <i class="fa fa-globe"></i>能耗管理
              </div>
             <!--  <div class="cz">

                <button class="btn green" @click="tableClick">列表 <i class="fa fa-plus"></i></button>
                <button class="btn green" @click="imgClick">图表 <i class="fa fa-trash-o"></i></button>
                
              </div> -->

            </div>
            <div class="portlet-body">
            
              <div class="tableDiv" v-show="tableDiv">
                <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                  <thead>
                    <tr>
                      <th>
                         序号
                      </th>
                      <th>
                         类别
                      </th>
                      <th>
                         名称
                      </th>
                      <th>
                         设备ID
                      </th>
                      <th>
                         地址
                      </th>
                      <th>
                         当日实时用量
                      </th>
                      <th>
                         当月累计用量
                      </th>
                    
                      <th>
                         当前状态
                      </th>
                      
                      <th>
                         功能操作
                      </th>
                    </tr>
                  </thead>
                  <tbody>

                  <tr class="odd gradeX" v-for="(item,index) in list">
                    <td>
                       {{item.number}}
                    </td>
                    <td>
                       {{item.lb}}
                    </td>
                    <td>
                       {{item.name}}
                    </td>
                    <td>
                       {{item.sbid}}
                    </td>
                    <td>
                       {{item.address}}
                    </td>
                    <td>
                       {{item.rydl}}
                    </td>
                    
                    <td>
                      {{item.yydl}}
                    </td>
                     <td v-if="item.type==1">
                       正常
                    </td>
                    <td v-if="item.type==0" class="warn" style="color: #ff3300">
                       告警
                    </td>
                    <td>
                      <!-- <router-link class="infor" style="color:#5b9bd1" tag="a">
                        详情
                      </router-link> -->
                      <a data-toggle="modal" style="color:#5b9bd1" href="#lookinfor" @click="lookSb($data,index)">
                        查看
                      </a> |
                      <a data-toggle="modal" style="color:#5b9bd1" href="#setFz" @click="lookSb($data,index)">
                        设定阀值
                      </a>
                    </td>
                  </tr>
                
                  </tbody>
                </table>
                  <div class="undefinedbootstrap_full_number" id="sample_1_paginate">
                    <ul class="pagination" style="visibility: visible;">
                      <li class="prev disabled">
                        <a title="第一">首页</i></a>
                      </li>
                      <li class="prev disabled">
                        <a title="上一页"><i class="fa fa-angle-left"></i></a>
                      </li>
                      <li class="active">
                        <a>1</a>
                      </li>
                      <li>
                        <a>2</a>
                      </li>
                      <li>
                        <a>3</a>
                      </li>
                      <li>
                        <a>4</a>
                      </li>
                      <li>
                        <a>5</a>
                      </li>
                      <li class="next">
                        <a title="下一个"><i class="fa fa-angle-right"></i></a>
                      </li>
                      <li class="next">
                        <a title="持续">尾页</a>
                      </li>
                      
                    </ul>
                    <span class="dataTotal">
                      每页显示 <span class="numData">20</span> 条数据
                    </span>
                  </div>
                </div>
            </div>
          </div>
          <!-- END EXAMPLE TABLE PORTLET-->
        </div>
      </div>
     

      <!-- 设定阀值开始 -->
      <div id="setFz" class="modal fade" tabindex="-1" data-width="500">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">{{lookObj.name}}阀值设定</h4>
        </div>
        <div class="modal-body">
          <div class="row m0 center">
            <div class="col-md-6">
              设备编号 : {{lookObj.number}}
            </div>
            <div class="col-md-6">
              能耗类型 : {{lookObj.lb}}
            </div>
            <div class="col-md-6">
              告警阀值 : <input type="text"> %
            </div>
            <div class="col-md-6">
              七日日平均用量 : {{lookObj.rydl}}
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
          <button type="button" class="btn blue">提交</button>
        </div>
      </div>              
      <!-- 设定阀值结束 -->

  

  </div>

</template>  

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;top: -2px;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .row.m0{margin: 0;}
     @media (max-width: 768px){
    .cz{margin-bottom: 0px;}
    .dataTotal{top: -5px;}
    .bs-select{width: 60%;}
  }
</style>

<script>
  // import '../../../../../static/global/plugins/bootstrap-modal/js/bootstrap-modalmanager.js';
  // import '../../../../../static/global/plugins/bootstrap-modal/js/bootstrap-modal.js';

  // import '../../../../../static/global/plugins/datatables/media/js/jquery.dataTables.min.js';

  // //highcharts插件
  // import highcharts from 'highcharts'  

  import Metronic from '../../../../../static/global/js/metronic.js'



  import Headers from '../../../../components/Headers.vue';
  import Bars from '../../../../components/Bars.vue';
  import Foot from '../../../../components/Foot.vue';
   
  import optVue from '../../../../config/optVue.js';
  import {setStore,getStore,removeStore} from '../../../../config/common.js';
  export default {
     data(){
      return{
        list:[],
        tableDiv:true,
        imgDiv:false,  
        lookObj:{},
        title:"",
        glNum:2,
        glNumChild:1
      }
    },
    components: {
        Headers,Bars,Foot
    },
    mounted(){
      document.title = '能耗管理';
      this.title = document.title
      $(".backstretch").remove();
      optVue.nhgl(this);

      $(function(){

        var element = $(".page-sidebar-menu>li").eq(3).children(".sub-menu").children("li").eq(0).children(".sub-menu").children("li").eq(getStore("childElement"));
        element.parent(".sub-menu").css({"display":"block"});
        element.parent(".sub-menu").parent("li").addClass("open");
        element.parent(".sub-menu").parent("li").parent(".sub-menu").css({"display":"block"});
        element.parent(".sub-menu").parent("li").parent(".sub-menu").parent("li").addClass("open");
        $(".warn").closest("tr").css({"color":"#ff3300"});
        $(".warn").closest("tr").find("a").css({"color":"#ff3300"});

     


      })
    },
    methods:{
      deleteData:function (index,data,event) {
        this.data = data;
        this.index = index;
      
      },
      tableClick:function(){
        this.tableDiv = true;
        this.imgDiv = false;
      },
      
      imgClick:function(){
         this.tableDiv = false;
        this.imgDiv = true;
      },
      lookSb:function(data,index){
        this.lookObj = data.list[index]
      }
    }

  }

</script>  



